Skip to main content

05 渲染流程

HTML、CSS、JavaScript 等数据，经过中间渲染模块的处理，最终输出为屏幕上的像素。

按照渲染的时间顺序，流水线可分为如下几个子阶段：构建 DOM 树、样式计算、布局阶段、分层、绘制、分块、光栅化和合成。

构建 DOM 树​

浏览器无法直接理解和使用 HTML，需要将 HTML 转换为浏览器能够理解的结构，即 DOM 树。

输入内容是 HTML 文件，经由 HTML 解析器解析，输出树状结构的 DOM。

打开 Chrome 的开发者工”，选择 Console 标签打开控制台，在控制台里面输入 document 后回车，就能看到一个完整的 DOM 树结构：

DOM 是保存在内存中的树状结构，可以通过 JavaScript 来查询或修改其内容。

document.getElementsByTagName("p")[0].innerText = "black"

生成 DOM 树后，要让 DOM 节点拥有正确的样式，就需要样式计算。

样式计算（Recalculate Style）​

把 CSS 转换为浏览器能够理解的结构​

CSS 样式的来源：

浏览器无法直接理解这些纯文本的 CSS 样式，当渲染引擎接收到 CSS 文本时，会执行一个转换操作，将 CSS 文本转换为浏览器可以理解的结构，styleSheets。

可以在 Chrome 控制台中输入 document.styleSheets 查看其结构：

渲染引擎会把获取到的 CSS 文本全部转换为 styleSheets 结构中的数据，并且该结构同时具备了查询和修改功能，这为后面的样式操作提供基础。

转换样式表中的属性值，使其标准化​

body { font-size: 2em }
p {color:blue;}
span  {display: none}
div {font-weight: bold}
div  p {color:green;}
div {color:red; }

需要将所有值转换为渲染引擎容易理解的、标准化的计算值，这个过程就是属性值标准化。

计算出 DOM 树中每个节点的具体样式​

CSS 继承，指每个 DOM 节点都包含有父节点的样式。

body { font-size: 20px }
p {color:blue;}
span  {display: none}
div {font-weight: bold;color:red}
div  p {color:green;}

应用到 DOM 节点的效果：

打开 Chrome 的开发者工具，选择第一个 element 标签，再选择 style 子标签：

这个阶段最终输出的内容是每个 DOM 节点的样式，并被保存在 ComputedStyle 的结构内。

了解每个 DOM 元素最终的计算样式，可以打开 Chrome 的开发者工具，选择第一个 element 标签，然后再选择 Computed 子标签：